<template>
    <div>
        <div class="table_box">
            <el-table :data="taskData.tableData" class="com_table" ref="straRef" height="700px">
                <div slot="empty" class="flexbox flexcenter flexcolumn flexjust" style="height:700px">
                    <img src="../../assets/img/null_icon.svg" alt="">
                    <div class="font_13 color_03">暂无数据</div>
                </div>
                <el-table-column prop="pay_order_roi" label="达人任务信息" min-width="310">
                    <template slot-scope="scope">
                        <div class="flexbox flexcenter">
                            <img :src="scope.row.aweme_headimg" alt="" class="aweme_head">
                            <div class="aweme_base">
                                <div class="first_text">{{scope.row.aweme_name}}</div>
                                <div class="second_text">达人 ID：{{scope.row.aweme_id}}</div>
                                <div class="second_text" v-if="scope.row.msg_type==1">任务 ID：{{scope.row.task_id}}</div>
                                <div class="second_text" v-else-if="scope.row.msg_type==2">收账主体：{{scope.row.getmoney_body}}</div>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="pay_order_roi" label="达人返点" min-width="260">
                    <template slot-scope="scope">
                        <div class="com_line">
                            <div class="first_text flexbox flexcenter flexbetween">
                                <span>达人返点收入：</span>
                                <span>￥{{scope.row.aweme_service}}</span>
                            </div>
                            <div class="second_text flexbox flexcenter flexbetween">
                                <span>达人任务金额：</span>
                                <span>￥{{scope.row.aweme_price}}</span>
                            </div>
                            <div class="second_text flexbox flexcenter flexbetween">
                                <span>返点比例：</span>
                                <span v-if="scope.row.aweme_ratio">{{scope.row.aweme_ratio}}%</span>
                                <span v-else>无</span>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="pay_order_roi" label="项目人员" min-width="200">
                    <template slot-scope="scope">
                        <div class="pro_member">
                            <div class="member_item flexbox flexcenter">
                                <div class="mem_left">媒介</div>
                                <div class="mem_right flex flexbox flexcenter">
                                    <span class="mem_name">{{scope.row.media_worker_name}}</span>
                                    <!-- <div class="mem_line"></div>
                                    <template v-if="scope.row.media_worker_bonus=='hide'"></template>
                                    <template v-else>奖金￥{{scope.row.media_worker_bonus}}</template> -->
                                </div>
                            </div>
                            <div class="member_item flexbox flexcenter">
                                <div class="mem_left">内容</div>
                                <div class="mem_right flex flexbox flexcenter">
                                    <span class="mem_name">{{scope.row.content_worker_name}}</span>
                                    <!-- <div class="mem_line"></div>
                                    <template v-if="scope.row.content_worker_bonus=='hide'"></template>
                                    <template v-else>奖金￥{{scope.row.content_worker_bonus}}</template> -->
                                </div>
                            </div>
                            <div class="member_item flexbox flexcenter">
                                <div class="mem_left">客户经理</div>
                                <div class="mem_right flex flexbox flexcenter">
                                    <span class="mem_name">{{scope.row.project_manager_name}}</span>
                                    <!-- <div class="mem_line"></div>
                                    <template v-if="scope.row.project_manager_bonus=='hide'"></template>
                                    <template v-else>奖金￥{{scope.row.project_manager_bonus}}</template> -->
                                </div>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="pay_order_roi" label="日期信息" min-width="190">
                    <template slot-scope="scope">
                        <div class="com_line">
                            <div class="dates_item">订单日期：<span>{{scope.row.order_date?scope.row.order_date:"--"}}</span></div>
                            <div class="dates_item">上线日期：<span>{{scope.row.online_date?scope.row.online_date:"--"}}</span></div>
                            <div class="dates_item">验收日期：<span>{{scope.row.inspect_date?scope.row.inspect_date:"--"}}</span></div>
                        </div>
                    </template>
                </el-table-column>
                <!-- <el-table-column prop="inspect_date" label="订单日期" min-width="150">
                    <template slot-scope="scope">
                        {{scope.row.inspect_date?scope.row.inspect_date:"--"}}
                    </template>
                </el-table-column> -->
                <el-table-column prop="pay_order_roi" label="收款信息" min-width="400">
                    <template slot-scope="scope">
                        <div class="com_line flexbox flexcenter">
                            <div class="other_img">
                                <img :src="scope.row.screenshot" alt="" class="other_img" v-if="scope.row.screenshot" @click="openBigImg(scope.row.screenshot)">
                                <div class="other_null" v-else>暂无图片</div>
                            </div>
                            <div class="other_info flex">
                                <div class="other_item flexbox flexcenter flexbetween">
                                    <span class="left_text">收款日期：</span>
                                    <span class="right_text">{{scope.row.getmoney_date?scope.row.getmoney_date:"--"}}</span>
                                </div>
                                <div class="other_item flexbox flexcenter flexbetween">
                                    <span class="left_text">下单账户：</span>
                                    <span class="right_text">{{scope.row.star_name?scope.row.star_name:"--"}}</span>
                                </div>
                                <div class="other_item flexbox flexcenter flexbetween">
                                    <span class="left_text">付款人/主体：</span>
                                    <span class="right_text">{{scope.row.pay_body?scope.row.pay_body:"--"}}</span>
                                </div>
                                <div class="other_item flexbox flexcenter flexbetween">
                                    <span class="left_text">对公/对私：</span>
                                    <span class="right_text">{{scope.row.account_type==1?"对公":"对私"}}</span>
                                </div>
                                <div class="other_item flexbox flexcenter flexbetween">
                                    <span class="left_text">是否开票：</span>
                                    <span class="right_text">{{scope.row.is_out_invoice==0?"否":"是"}}</span>
                                </div>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <!-- <el-table-column prop="revenue_bonus" label="任务奖金" min-width="125" v-if="taskData.countData.aweme_service_bonus!=='hide'" key="revenue_bonus">
                    <template slot-scope="scope">
                        ￥{{scope.row.revenue_bonus?scope.row.revenue_bonus:"0.00"}}
                    </template>
                </el-table-column> -->
                <el-table-column prop="pay_order_roi" label="操作" width="122" fixed="right" align="center">
                    <template slot-scope="scope">
                        <p><el-link type="primary" :underline="false" @click="eidtTask(scope.row)">任务设置</el-link></p>
                        <p><el-link type="danger" :underline="false" @click="deleteTask(scope.row.id)" style="margin-top:10px">删除</el-link></p>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="page_box flexbox flexcenter" v-if="taskData.total>0">
            <el-pagination background layout="total, prev, pager, next,sizes" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.page" :page-size="queryInfo.limit" :page-sizes="[20, 50, 100, 200]" :total="taskData.total">
            </el-pagination>
        </div>
        <ViewBigImg ref="view_big"/>
    </div>
</template>

<script>
import ViewBigImg from "../common/ViewBigImg"
export default {
    components: {
        ViewBigImg
    },
    props: ["queryInfo", "taskData"],
    name: "",
    data() {
        return {};
    },
    created() {},
    methods: {
        eidtTask(row) {
            this.$emit("eidtTask", row);
        },

        // 删除
        deleteTask(id) {
            this.$confirm("是否要删除该数据?删除后无法恢复", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(async () => {
                    const { data: res } = await this.$http.post(
                        "fxdata/revenue/revenueDelete",
                        {
                            id: id,
                        }
                    );
                    if (res.code !== 200) {
                        this.$message.error(res.msg);
                        return;
                    } else {
                        this.$message({
                            type: "success",
                            message: "删除成功!",
                        });
                        this.$emit("getDataList", 1);
                    }
                })
                .catch(() => {});
        },
        
        // 每页显示多少条数据
        handleSizeChange(val) {
            this.queryInfo.limit = val;
            this.$emit("getDataList", 1);
        },
        // 当前页切换
        handleCurrentChange(val) {
            this.queryInfo.page = val;
            this.$emit("getDataList", val);
        },

        openBigImg(url){
            this.$refs.view_big.getData(url)
        },
    },
};
</script>


<style scoped>
.table_box {
    padding: 0 20px;
    margin-top: 12px;
}

.brand_name {
    font-size: 14px;
    color: #17233d;
    line-height: 22px;
}
.product_name {
    font-size: 14px;
    color: #616c85;
    line-height: 22px;
    margin-top: 4px;
}
.com_line {
    border: 1px solid #ebebeb;
    border-radius: 4px;
    padding: 8px;
}
.first_text {
    font-size: 14px;
    line-height: 20px;
    color: #17233d;
    height: 20px;
}
.second_text {
    font-size: 13px;
    color: #b4b7bd;
    line-height: 18px;
    margin-top: 4px;
    line-height: 18px;
}
.member_item {
    margin-bottom: 8px;
    margin-top: 0;
}
.member_item:last-child {
    margin-bottom: 0;
}
.mem_left {
    width: 60px;
    height: 21px;
    line-height: 21px;
    text-align: center;
    background: rgba(68, 117, 255, 0.05);
    border-radius: 4px;
    font-size: 12px;
    color: #4972ec;
}
.mem_right {
    padding: 0 8px;
    height: 21px;
    line-height: 21px;
    border: 1px solid #ebebeb;
    border-radius: 4px;
    font-size: 12px;
    color: #616c85;
    margin-left: 12px;
}
.aweme_head {
    width: 48px;
    height: 48px;
    border-radius: 50%;
}
.aweme_base {
    margin-left: 12px;
}
.mem_name {
    width: 40px;
}
.mem_line {
    height: 8px;
    border-left: 1px solid #ebebeb;
    margin: 0 8px;
}
.dates_item {
    font-size: 12px;
    color: #b4b7bd;
    margin-bottom: 4px;
    height: 17px;
    line-height: 17px;
}
.dates_item:last-child {
    margin-bottom: 0;
}
.dates_item span {
    color: #616c85;
}
.other_item {
    font-size: 13px;
    line-height: 18px;
    height: 18px;
    color: #616c85;
    margin-bottom: 4px;
}
.cost_content {
    line-height: 22px;
}
.other_item:last-child {
    margin-bottom: 0;
}
.other_img {
    width: 106px;
    height: 106px;
    overflow: hidden;
    border-radius: 2px;
    flex-shrink: 0;
}
.other_null {
    width: 106px;
    height: 106px;
    line-height: 106px;
    text-align: center;
    background-color: #ecedef;
    color: #b9b9b9;
    font-size: 13px;
}
.other_info {
    margin-left: 8px;
}
.right_text {
    max-width: 130px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}
</style>
